import * as React from 'react';
import { Col, Select  } from 'antd';
interface Props extends React.Props<any> {
  label?: string;
  value?: string;
  error?: string;
  col?: number;
  disabled?: boolean;
  required?: boolean;
  modelKey: string;
  options?: Array<{data: any, label: any}>;
  placeholder?: string;
  onChange?: (e: string, key: string) => void;
}
export class SSelect extends React.PureComponent<Props, any> {
  static defaultProps = {
    value: ''
  }
  render() {
    const { label, col, disabled, required, error, modelKey, value, placeholder, options } = this.props;
    return (
      <div className='s-select smart-form'>
      <Col span={col}>
          {
            label ?
            <label className='label'>
              <span>{label}</span>
              {required ? <i className='required'>*</i> : null}
            </label> : null
          }
          <div className={error ? 'form-error' : ''}>
            <Select
              value={value}
              disabled={disabled}
              style={{width: '100%'}}
              placeholder={placeholder}
              onChange={e => this.props.onChange!(e, modelKey)}
            >
              {
                options ? options.map((v, k) => (
                  <Select.Option key={k} value={v.data}>{v.label}</Select.Option>
                )) : null
              }
            </Select>
          </div>
          <em className='note-error'>{error}</em>
        </Col>
      </div>
    )
  }
}